<template>
  <div class="operation-content">
    <div class="operation-row">
      <div class="blue-box operation-box">
        <p class="blue-box-title operation-box-title-l">
          <span class="blue-title-main">设备资产一览</span>
        </p>
        <div class="operation-card-box">
          <div class="blue-box">
            <div class="blue-card-p">
              <div>
                <p>设备资产总数</p>
              </div>
              <div class="blue-card-num" v-text="deviceCount.设备资产总数"></div>
            </div>
          </div>
          <div class="blue-box">
            <div class="blue-card-p">
              <div>
                <p>纳入监管设备数量</p>
              </div>
              <div class="blue-card-num" v-text="deviceCount.纳入监管设备数量"></div>
            </div>
          </div>
          <div class="blue-box">
            <div class="blue-card-p">
              <div>
                <p>在线设备数量</p>
              </div>
              <div class="blue-card-num" v-text="deviceCount['在线设备数量']"></div>
            </div>
          </div>
          <div class="blue-box">
            <div class="blue-card-p">
              <div>
                <p>离线设备数量</p>
              </div>
              <div class="blue-card-num" v-text="deviceCount['离线设备数量']"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="blue-box operation-box">
        <p class="blue-box-title">
          <span class="blue-title-main">概况</span>
        </p>
        <div class="operation-main">
          <div class="operation-left-list">
            <li v-for="(item,key) in urgentCount" :key="item.index">
              {{key}}：
              <span>{{item}}</span>条
            </li>
          </div>
          <div class="operation-right">
            <div class="button-group"></div>
            <div class="demo_line_03">
              <b></b>
              <span>共{{allWorkOrderCount}}条工单</span>
              <b></b>
            </div>
            <div class="operation-right-data">
              <div>
                <p class="blue-title-gray">{{statusCount['处理完成']||0}}</p>
                <p class="blue-title-main">已处理</p>
              </div>
              <div>
                <p class="blue-title-gray">{{statusCount['待指派']||0 + statusCount['已指派']||0 }}</p>
                <p class="blue-title-main">待处理</p>
              </div>
              <div>
                <p class="blue-title-gray">{{statusCount['处理中']||0}}</p>
                <p class="blue-title-main">处理中</p>
              </div>
              <div>
                <p class="blue-title-gray">{{statusCount['已忽略']||0}}</p>
                <p class="blue-title-main">已关闭</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="blue-box operation-box">
        <p class="blue-box-title">
          <span class="blue-title-main">实时异常分布</span>
        </p>
        <div id="operation-chart">
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
    <div class="operation-row">
      <div class="blue-box operation-form">
        <p>工单处理动态</p>
      </div>
    </div>
    <div class="operation-row">
      <div class="blue-box operation-table">
        <table class="blue-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>操作人</th>
              <th>工单描述</th>
              <th>当前状态</th>
              <th>操作内容</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,key) in workLog" :key="key">
              <td>{{ key+1 }}</td>
              <td>{{ item.creator }}</td>
              <td>{{ item.title }}</td>
              <td>{{ item.status }}</td>
              <td>{{item.date | datefmt('MM-DD HH:mm')}}{{ item.remark }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "hospitalE",
  data() {
    return {
      chartTheme: {},
      chart1: {
        color: ["#048eff", "#00e7d0", "#3f38ff", "#8e3fff", "#dd00c5"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show : false , 
          data: ["照明", "空调", "插座"],
          orient: "vertical",
          left: 40,
          top: "center"
        },

        series: [
          {
            name: "开启量",
            type: "pie",
            radius: "55%",
            center: ["60%", "50%"],
            data: [
              { value: 435, name: "照明" },
              { value: 310, name: "插座" },
              { value: 274, name: "空调" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#414474"
                },
                length: 10,
                length2: 20
              }
            }
          }
        ]
      },
      deviceCount: {
        设备资产总数: 0,
        纳入监管设备数量: 0,
        在线设备数量: 0,
        离线设备数量: 0
      },
      urgentCount: { 不紧急工单: 0, 一般工单: 0, 超急工单: 0 },
      statusCount: { 处理中: 0, 已处理: 0, 待处理: 0 },
      workLog: []
    };
  },
  mounted: function() {
    this.$http("/vqdisplay/static/HospitalChartTheme.json").then(response => {
      this.chartTheme = response.data;
    });
    this.getData();
  },
  methods: {
    getData: function() {
      this.$http("/vqdisplay/maintenance/data").then(response => {
        if (response.status === 200) {
          let _data = response.data.body;
          this.deviceCount = _data.device_count;
          this.urgentCount = _data.urgent_count;
          this.statusCount = _data.status_count;
          this.workLog = _data.work_log;
          this.chart1.legend.data = _data.worktype_pie.legend;
          this.chart1.series[0].data = _data.worktype_pie.series;
        }
      });
    }
  },
  computed: {
    allWorkOrderCount: function() {
      let count = 0;
      if (this.statusCount)
        for (let key in this.statusCount) count += this.statusCount[key];
      return count;
    }
  }
};
</script>
<style scoped>
@import "../../../style/operation.css";
.echarts {
  height: 250px;
  width: 100%;
}
</style>